<template>
  <section id="invite">
    <img src="../../assets/image/banner.png" alt=""  height="547" class="invite_banner">
    <div class="content">
      <div class="info_title">我的分享方式</div>
      <div class="detail clearfix">
        <div class="code pull_left">
          <div>专属邀请码</div>
          <div class="clearfix">
            <span class="pull_left">{{user.invite}}</span>
            <a href="javascript:void(0)" class="pull_right" @click="$js.copy(user.invite)">复制分享</a>
          </div>
        </div>
        <div class="pull_left url">
          <div>专属下载链接</div>
          <div class="clearfix">
            <span class="pull_left">{{url}}</span>
            <a href="javascript:void(0)" class="pull_right" @click="$js.copy(url)">复制分享</a>
          </div>
        </div>
        <div class="pull_right down">
          <div>下载二维码海报</div>
          <div>
            <a href="#" class="btn_private" @mousemove="show=true" @mouseout="show=false" download="hxexQrCode.png" id="down">下载专属二维码海报</a>
            <!-- <a href="" class="btn_private">下载专属二维码海报</a> -->
          </div>
        </div>
        <div class="qrcode" v-show="show">
          <canvas id="myCanvas" width="244" height="413"></canvas>
          <img src="../../assets/image/qrcode.png" alt="" width="244" height="413" id="bg" style="display:none">
          <img src="../../assets/image/qrcode.png" alt="" width="375" height="667" id="bgDown" style="display:none">
          <qrcode :value="url" :options="{ width: 200 }" id="qrcode" style="display:none"></qrcode>
        </div>
      </div>
    </div>
  </section>
</template>
<script>
import VueQrcode from '@chenfengyuan/vue-qrcode';
export default {
  components: {
    "qrcode":VueQrcode
  },
  data() {
    return {
      show:false,
    }
  },
  methods: {
    
  },
  computed:{
    user() {
      return this.$store.state.user;
    },
    url() {
      return window.server.axiosUrl + '/' +this.user.code;
    }
  },
  created() {
  },
  mounted() {
    this.$nextTick(()=> {
      var c = document.getElementById('myCanvas');
      var ctx = c.getContext("2d");
      var img = document.getElementById('bg');
      var qrcode = document.getElementById('qrcode');
      img.onload = function() {
        ctx.drawImage(img,0,0,244,413);
        ctx.drawImage(qrcode,158,326,60,60);
      }
      var imgDown = document.getElementById('bgDown');
      var cDwon = document.createElement('canvas');
      cDwon.width = 375;
      cDwon.height = 667;
      var ctxDown = cDwon.getContext('2d');
      imgDown.onload = function() {
        ctxDown.drawImage(imgDown,0,0,375,667);
        ctxDown.drawImage(qrcode,239,526,99,100);
        var dd = cDwon.toDataURL("image/png");
        var down = document.getElementById('down');
        down.href = dd;
      }
    })
  },
  destroyed() {
   
  }
}
</script>
